<template>
  <div>
    <el-menu
      ref="menu"
      class="el-menu-vertical-demo"
      style="height: 100%"
      :unique-opened="true"
      :router="true"
      :default-active="$route.path"
      background-color="#34495e"
      text-color="#ecf0f1"
      active-text-color="#ffd04b"
    >
      <el-menu-item v-if="false" index="/mgr/home">
        <i class="el-icon-s-home"></i>
        <span>首页</span>
      </el-menu-item>
      <el-menu-item v-if="username == 'admin'" index="/mgr/accountmanager">
        <i class="el-icon-user"></i>
        <span>账号管理</span>
      </el-menu-item>
      <el-menu-item @click="setWechatList">
        <i class="el-icon-chat-dot-round"></i>
        <span>绑定微信列表</span>
      </el-menu-item>
      <el-menu-item index="/mgr/communitymanagement">
        <i class="el-icon-office-building"></i>
        <span>小区管理</span>
      </el-menu-item>
      <el-menu-item index="/mgr/buildingmanagement">
        <i class="el-icon-office-building"></i>
        <span>楼栋管理</span>
      </el-menu-item>
      <el-menu-item index="/mgr/doormanagement">
        <i class="el-icon-unlock"></i>
        <span>门禁管理</span>
      </el-menu-item>
      <el-menu-item index="/mgr/tenantmanagement">
        <i class="el-icon-s-custom"></i>
        <span>住户管理</span>
      </el-menu-item>
      <el-menu-item index="" @click="loginOut()">
        <i class="el-icon-switch-button"></i>
        <span>退出登录</span>
      </el-menu-item>
    </el-menu>
    <!-- 微信列表 -->
    <el-drawer title="绑定微信列表" :visible.sync="wechat.dialog_status" direction="rtl" size="auto"
       :destroy-on-close="true" :show-close="true" :wrapperClosable="false">
       <we-chat-management style="margin:0 20px;" :userid="wechat.userid" ></we-chat-management>
    </el-drawer>
  </div>
</template>

<script>
import WeChatManagement from '@/components/views/WeChatManagement.vue';

export default {
  name: "liftsider",
  data() {
    return {
      router_path: "/mgr",
      username: this.$store.state.username,
      wechat:{
        dialog_status:false,
        userid:this.$store.state.userid
      }
    };
  },
  methods: {
    loginOut() {
      this.$store.dispatch("loginOut");
      this.$router.push("/login");
    },
    setWechatList(){
      this.wechat.dialog_status=true;
    }
  },
  // 处理浏览器刷新后导航选中问题
  watch: {
    $route() {
      let i = this.$route.path;
      localStorage.setItem("index", i); //刷新
      setTimeout(() => {
        //路由跳转
        this.$refs.menu.activeIndex = i;
      }, 100);
    },
  },
  components:{
    WeChatManagement
  }
};
</script>

<style scoped>
/* .el-menu-item.is-active,
.el-menu-item:hover {
  background: rgb(29, 38, 53) !important;
  color: #eea243;
} */

.el-menu span {
  font-size: 0.9rem;
}
.el-menu {
  border-right-width: 0;
  font-family: "PingFang SC";
  font-size: 0.9rem;
}
.el-menu li {
  font-size: 0.9rem;
}
.el-menu-item {
  min-width: 10px;
}
</style>

<style>
.el-menu-item i {
  color: #ecf0f1;
}

.el-submenu__title i {
  color: #ecf0f1;
}
/* .el-submenu__title:hover {
  background: rgb(29, 38, 53) !important;
  color: #eea243;
} */
</style>
